/**
 *                         App页面顶层路由
 *
 *                           code : App
 */

"use strict";

//=============
// 引入程序依赖
//=============
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {browserHistory} from 'react-router';

//images
import geren from "../../../../static/img/h5/V-geren.png";
import qiye from "../../../../static/img/h5/V-qiye.png";
import tx from "../../../../static/img/film/moren-tx.png";


class HomeListContainer extends Component{

    constructor(props){
        super(props) ;
    }

    //进入个人主页
    queryCreator() {
        // console.log("======userId======",this.props.userId);
        localStorage.setItem("personalId",this.props.userId)

        var id = sessionStorage.getItem("id");
        if(id != null){
            id = sessionStorage.getItem("id").replace(/\//g, '_');
        }else{
            id = "0000000000000000000000000000";
        }

        var viewerKey = sessionStorage.getItem("viewerKey");
        if(viewerKey == null || viewerKey == ""){
            viewerKey = "0";
        }

        window.location.href="/App/MobileMine/"+id+"/"+viewerKey;
        window.scrollTo(0,0);
    }

    //进入视频详情页面
    queryFilm() {
        console.log("======filmId======",this.props.filmId);
        // browserHistory.push("/App/FilmDetail/" + this.props.filmId);
        window.location.href="/App/FilmDetail/"+ this.props.filmId;
        window.scrollTo(0,0);
    }

    render(){
        let typeOfData = this.props.typeOfData;
        let Logo = () => {
            if (this.props.type == "0") {
                return <img src={geren} alt="图标"/>
            } else {
                return <img src={qiye} alt="图标"/>
            }
        }

        return(
            <div>

                {
                    typeOfData == 0 ? (
                        <div className="editor-list" onClick={this.queryFilm.bind(this)}>
                            <div className="list-img">
                                <img src={this.props.videoImgUrl} alt="视频封面" />
                                {/*<p className="tips none">我关注的</p>*/}
                            </div>
                            <div className="list-text">
                                <p className="small">
                                    <span>
                                        {this.props.nickName}
                                        <Logo/>
                                    </span>
                                    <span className="right">{this.props.categoryName}<span>|</span>{this.props.videoLength}</span>
                                </p>
                                <p className="big">{this.props.title}</p>
                            </div>
                        </div>
                    ) : (
                        <div className="editor-list1 clearfix"  onClick={this.queryCreator.bind(this)}>
                            <div className="top clearfix">
                                <div className="list1-img"><img src={this.props.headUrl ? this.props.headUrl : tx} alt="头像" /></div>
                                <div className="list1-text">
                                    <p className="text1">
                                        {this.props.nickName}
                                        <Logo/>
                                    </p>
                                    <p className="text2">{this.props.categoryName}</p>
                                    <p className="text3">{this.props.autograph}</p>
                                </div>
                            </div>
                            <div className="bottom">
                                <p className="text4">
                                    <span className="film">作品：{this.props.filmNum ? this.props.filmNum : 0}</span>
                                    <span className="like">受喜欢：{this.props.likeNum ? this.props.likeNum : 0}</span>
                                    <span className="fans">粉丝：{this.props.fansNum ? this.props.fansNum : 0}</span>
                                </p>
                            </div>
                        </div>
                    )
                }
            </div>
        )
    }
}

const HomeList = connect()(HomeListContainer) ;

export { HomeList as default } ;